<template>
    <div class="assy" @click="toPoint">
        <div class="total">
            <div class="total-item">
                <img src="@/assets/images/disaterLosses/fh_icon1.png" alt="">
                <span class="total-item-num">{{infos.surveyPointNum}}</span>
                <span class="total-item-name">调查点(个)</span>
            </div>
            <div class="total-item" @click="showDetails" style="pointer-events:none;">
                <img src="@/assets/images/disaterLosses/fh_icon2.png" alt="">
                <span class="total-item-num">{{ infos.numberParticipant }}</span>
                <span class="total-item-name">参与人员(人次)</span>
            </div>
            <div class="total-details" v-show="isShowDetails">
                <h4>现场抽样复核参与人 <el-icon @click="isShowDetails = false"><Close /></el-icon></h4>
                <el-table :data="list">
                    <el-table-column label="序号" prop="value" align="center"> 
                        <template #default="scope">
                            {{ scope.$index + (currentPage - 1) * pageSize + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column label="姓名" align="center">
                        <template #default="scope">
                            <span style="color: #46FFFF;">{{scope.row.name}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <div class="pagination">
                    共 <b>859</b> 条记录
                </div> -->
                <pagination style="margin-top: 0" :total="total" :page="currentPage"
                    :layout="'total, prev, pager, next, '"
                    :limit="10"
                    @pagination="getList"
                />
                <!-- 三角形气泡 -->
                <div class="tri"></div>
            </div>
            <div class="total-item">
                <img src="@/assets/images/disaterLosses/fh_icon3.png" alt="">
                <span class="total-item-num">{{ infos.trip }}</span>
                <span class="total-item-name">行程(万公里)</span>
            </div>
        </div>
        <el-divider border-style="dashed" />
        <p>县级行政区划调查点覆盖率</p>
        <div class="footer">
            <div class="footer-item">
                <div id="myCountyCoverageChart"></div>
                <p style="margin-top:-20px">覆盖率</p>
            </div>
            <div class="footer-item">
                <ul>
                    <li class="area" v-for="(item,index) in listData" :key="index">
                        <span class="area-num">{{ item.coverage }}</span>
                        <span class="area-name">{{ item.province }}</span>
                    </li>
                    <li v-for="index in 5" :key="index"></li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { defineProps } from 'vue';
import {
  getSceneCheckSituation,
  getCountyCoverage,
  getProvinceCoverage
} from '@/api/disasterLosess.js';

const router = useRouter();
const props = defineProps({
//   infos: {
//     type: Object
//   },
//   listData:{
//     default: [],
//     type: Array,
//   },
//   countyCoverage: Number
})

// let { listData } = toRefs(props)

const data = reactive({
    isShowDetails: false,//展开收起
    infos: {},
    list: [],
    total: 0,
    currentPage: 1,
    pageSize: 10,
    countyCoverage:'',
    listData: [],
})
const { isShowDetails, list, total, currentPage, pageSize, countyCoverage, infos, listData } = toRefs(data)

function toPoint(){
    router.push('/disasterLosses/samplingPoint');
    console.log('111');
}

function showDetails(){
    isShowDetails.value = !isShowDetails.value
    getList()
}
// 抽样情况
function getList(){
    getSceneCheckSituation({page:currentPage.value, rows:pageSize.value}).then(res=>{
        infos.value = res.data;
        list.value = res.data.map.rows;
        total.value = res.data.map.total;
    })
}
let myChart = null;
const renderChart = () =>{
  if (!myChart) {
    echarts.init(document.getElementById('myCountyCoverageChart')).dispose();
    myChart = echarts.init(document.getElementById('myCountyCoverageChart'));
  }
  const option = {
    series: [
        {
            type: 'gauge',
            min:0,
            max:100,
            splitNumber: 5,
            axisLine: {
                lineStyle: {
                    width: 10,
                    color: [
                        [0.33, '#0775FE'],
                        [0.67, '#46FFFF'],
                        [1, '#F9387F']
                    ]
                }
            },
            pointer: {
                // icon: ('@/assets/images/disaterLosses/pointer.png'),
                length: '60%',
                width: 4,
                offsetCenter: [0, '50%']
            },
            axisTick: {
                distance: -30,
                length: 8,
                lineStyle: {
                    color: 'transparent',
                    width: 2
                }
            },
            splitLine: {
                distance: -30,
                length: 30,
                lineStyle: {
                    color: 'transparent',
                    width: 4
                }
            },
            axisLabel: {
                color: '#fff',
                distance: -56,
                fontSize: 10
            },
            detail: {
                valueAnimation: true,
                formatter: '{value}%',
                color: '#46FFFF',
                fontSize: 24,
                offsetCenter:[0,'70%'],
            },
            data: [
                {
                    value: countyCoverage.value
                }
            ]
        }
    ]
  };
  // 渲染
  option && myChart.setOption(option);
}
// 县覆盖率
const setChart =() =>{
    getCountyCoverage().then((res) => {
        countyCoverage.value = res.data;
        nextTick(() => {
            renderChart()
        })
    });
}
// 省覆盖率
const provinceCoverage = () =>{
    getProvinceCoverage().then((res) => {
        listData.value = res.data;
    })
}
onMounted(() => {
    getList()
    provinceCoverage()
    setChart()
    window.addEventListener('resize', resize)
})
const resize = () => {
  let myChart = echarts.init(document.getElementById("myCountyCoverageChart"));
  myChart.resize()
}
onBeforeUnmount(() => {
  window.removeEventListener('resize', resize)
})
</script>
<style lang='scss' scoped>
.assy{
    margin: 12px 10px 0;
    color: #fff;
    font-size: 16px;
    .total{
        display: flex;
        // justify-content: space-around;
        margin-bottom: 10px;
        position: relative;
        &-item{
            text-align: center;
            color: #fff;
            cursor: pointer;
            width: calc(100%/3);
            img{
                display: block;
                width: 76px;
                height: 76px;
                margin: 0 auto;
            }
            &-num{
                display: block;
                width: 70px;
                height: 30px;
                background-size: 100% 100%;
                background-image:url('@/assets/images/disaterLosses/fh_bg1.png');
                line-height: 36px;
                color: #FFF78B;
                font-size: 20px;
                margin:5px auto;
            }
            &:nth-child(2){
                .total-item-num{
                    background-image:url('@/assets/images/disaterLosses/fh_bg2.png');
                    color: #9FFFFF;
                }
            }
            &:nth-child(3){
                .total-item-num{
                    background-image:url('@/assets/images/disaterLosses/fh_bg3.png');
                    color: #FFF78B;
                }
            }
        }
        &-details{
            width: 408px;
            max-height: 480px;
            background: rgba(0,36,153,0.9);
            border-radius: 8px 8px 8px 8px;
            opacity: 1;
            border: 2px solid #0190F9;
            // border-bottom: none;
            position: absolute;
            // top: -490px;
            left: 8px;
            bottom: 160px;

            h4{
                font-size: 18px;
                text-align: center;
                margin: 15px auto;
                padding-right: 15px;
                .el-icon{
                    float: right;
                    cursor: pointer;
                }
            }
            .el-table{
                width: 370px;
                // max-height: 300px;
                margin: 0 auto;
                overflow: hidden;
                background: rgba(0,36,153,0.9);
                :deep(.el-table__header tr){
                    background-color: #030051;
                    height: 35px;
                    line-height: 35px;
                }
                :deep(.el-table__header th.el-table__cell){
                    background-color: transparent
                }
                :deep(.el-table__header th.el-table__cell.is-leaf){
                        border-bottom: none;
                }
                :deep(tr:hover>td){
                    background:#030051 !important;
                }
                :deep(.el-table__row){
                    background:#030051 !important;
                    height: 30px;
                    margin: 2px 0;
                }
                :deep(.el-table__empty-text){
                    color: #fff;
                }
                :deep(.el-table__inner-wrapper::before){
                    background-color: transparent !important;
                }
            }

            .pagination{
                text-align: right;
                padding: 0 20px;
                font-size: 14px;
                b{
                    font-weight: normal;
                    color: #46FFFF;
                }
            }
            // 三角气泡
            .tri{
                display:block;
                border-width: 16px; 
                position: absolute;
                bottom: -32px;  
                left: 188px;
                border-style: solid  dashed  dashed;
                border-color: #0190F9  transparent  transparent;
                font-size: 0;  
                line-height: 0;
            }
            &::after{
                content:'';
                display: block;  
                border-width: 16px;  
                position: absolute;  
                bottom: -28px;  
                left: 188px; 
                border-style: solid  dashed  dashed;  
                border-color: rgba(0,36,153,0.9)  transparent  transparent; 
                font-size: 0;  
                line-height: 0;
            }
        }
    }

    .el-divider{
        height: 0;
        border-top: 1px dashed #475ADB;
        margin: 0 auto;
    }
    p{
        margin: 6px 0;
        padding-left: 5px;
    }
    .footer{
        display: flex;
        .footer-item{
            position: relative;
            text-align: center;
            width: 50%;
            p{
               margin-left: -12px;
            }

            ul{
                width: 181px;
                position: relative;
                // background: pink;
                height: 170px;
                margin: 0 20px;
                li{
                    display: block;
                    position: absolute;
                    border-radius: 50%;
                    text-align: center;
                    span{
                        display: block;
                        font-size: 12px;
                        color: #fff;
                    }
                    span.area-num{
                        font-size: 14px;
                        margin-top: 12px;
                    }
                    &:nth-child(1){
                        width: 83px;
                        height: 82px;
                        background-size: 100% 100%;
                        background-image: url('@/assets/images/disaterLosses/area.png');
                        top: 42px;
                        left: 43px;
                        span.area-num{
                            font-size: 16px;
                            margin-top: 24px;
                        }
                    }
                    &:nth-child(2){
                        width: 56px;
                        height: 56px;
                        background: radial-gradient(circle at 50% 50%, rgba(227,46,255,0.15) 0%, rgba(227,46,255,0.5) 75%, rgba(227,46,255,0.7) 100%);
                        box-shadow: 0px 0px 10px 1px #E32EFF;
                        border: 1px solid #E32EFF;
                        left: 15px;
                        bottom: 0;
                    }
                    &:nth-child(3){
                        width: 50px;
                        height: 50px;
                        background: radial-gradient(circle at 50% 50%, rgba(166,216,57,0.15) 0%, rgba(166,216,57,0.5) 75%, rgba(166,216,57,0.7) 100%);
                        box-shadow: 0px 0px 10px 1px #A6D839;
                        border: 1px solid #A6D839;
                        right: 0;
                        bottom: 24px;
                    }
                    &:nth-child(4){
                        width: 45px;
                        height: 45px;
                        background: radial-gradient(circle at 50% 50%, rgba(14,194,194,0.15) 0%, rgba(26,199,199,0.5) 75%, rgba(70,255,255,0.7) 100%);
                        box-shadow: 0px 0px 10px 1px #46FFFF;
                        border: 1px solid #46FFFF;
                        top: 5px;
                        right: 24px;
                        span.area-num{
                            font-size: 12px;
                            margin-top: 8px;
                        }
                    }
                    &:nth-child(5){
                        width: 42px;
                        height: 42px;
                        background: radial-gradient(circle at 50% 50%, rgba(255,179,91,0.15) 0%, rgba(255,179,91,0.5) 75%, rgba(255,179,91,0.7) 100%);
                        box-shadow: 0px 0px 10px 1px #FFB35B;
                        border: 1px solid #FFB35B;
                        top: 20px;
                        left: 6px;
                        span.area-num{
                            font-size: 12px;
                            margin-top: 6px;
                        }
                    }
                    &:nth-child(6){
                        width: 30px;
                        height: 30px;
                        background: radial-gradient(circle at 50% 50%, rgba(166,216,57,0.15) 0%, rgba(166,216,57,0.5) 75%, rgba(166,216,57,0.7) 100%);
                        box-shadow: 0px 0px 10px 1px #A6D839;
                        opacity: 0.33;
                        border: 1px solid #A6D839;
                        top: 0;
                        left: 60px;
                    }
                    &:nth-child(7){
                        width: 27px;
                        height: 27px;
                        background: radial-gradient(circle at 50% 50%,rgba(7,117,254,0.15) 0%, rgba(7,117,254,0.5) 75%, rgba(7,117,254,0.7) 100%);
                        box-shadow: 0px 0px 10px 1px #0775FE;
                        border: 1px solid #0775FE;
                        left: 0;
                        bottom: 62px;
                    }
                    &:nth-last-child(3){
                        width: 25px;
                        height: 25px;
                        background: radial-gradient(circle at 50% 50%, rgba(14,194,194,0.15) 0%, rgba(26,199,199,0.5) 75%, rgba(70,255,255,0.7) 100%);
                        box-shadow: 0px 0px 10px 1px #46FFFF;
                        opacity: 0.5;
                        border: 1px solid #46FFFF;
                        right: 44px;
                        bottom: 2px;
                    }
                    &:nth-last-child(2){
                        width: 20px;
                        height: 20px;
                        background: radial-gradient(circle at 50% 50%, rgba(255,179,91,0.15) 0%, rgba(255,179,91,0.5) 75%, rgba(255,179,91,0.7) 100%);
                        box-shadow: 0px 0px 10px 1px #FFB35B;
                        opacity: 0.7;
                        border: 1px solid #FFB35B;
                        left: 80px;
                        bottom: 24px;
                    }
                    &:last-child{
                        width: 19px;
                        height: 19px;
                        background: radial-gradient(circle at 50% 50%, rgba(227,46,255,0.15) 0%, rgba(227,46,255,0.5) 75%, rgba(227,46,255,0.7) 100%);
                        box-shadow: 0px 0px 10px 1px #E32EFF;
                        opacity: 0.39;
                        border: 1px solid #E32EFF;
                        right: 19px;
                        top: 60px;
                    }
                }
            }
        }
        #myCountyCoverageChart{
            width: 200px;
            height: 160px;
            position: relative;
            margin-top: 5px;
            &::after{
                content:'';
                display: block;
                width: 150px;
                height: 125px;
                font-size: 10px;
                background-size: 100% 100%;
                background-image: url('@/assets/images/disaterLosses/fh_bg.png');
                position: absolute;
                top: 5px;
                left: 25px;
            }
            
        }
    }
}
</style>